<template>
	<view class="pay">

		<!-- 自定义导航栏 -->
		<view>
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="支付页面" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			</u-navbar>
		</view>
		<view class="payorder">
			<view class="payNumber">
				订单号:{{outTradeNo}}
			</view>
			<view class="payPrice">
				<text>¥</text>{{totalAmount}}
			</view>
			<view class="payTime">
				<!-- 最迟支付时间:{{payinfo.end_time}} -->
			</view>
		</view>
		<view class="payType">
			<view class="payTypeTitle">
				请选择支付方式
			</view>
			<radio-group @change="radioChange">
				<view class="payTypeItem">
					<view class="payTypeItemLeft">
						<image src="../../static/images/alipay.png" class="payicon"></image>支付宝支付
					</view>
					<radio color="#01c2fa" value="1" checked=""></radio>
				</view>
				<view class="payTypeItem">
					<view class="payTypeItemLeft">
						<image src="../../static/images/wxpay.png" class="payicon"></image>微信支付
					</view>
					<radio color="#01c2fa" value="2"></radio>
				</view>
			</radio-group>

		</view>
		<view class="payButton" @click="confirmPay">
			确定支付
		</view>

		<!-- 添加支付表单区域 -->
		<div id="divform"></div>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				paytype: 1,
				payForm: '', //初始化支付表单
				totalAmount: '', //初始化总支付金额
				outTradeNo: '', //初始化主订单号
			}
		},
		onLoad(option) {
			this.totalAmount = uni.getStorageSync('carts').totalPrice
			this.outTradeNo = uni.getStorageSync('outTradeNo')
		},
		methods: {
			// 切换支付方式
			radioChange() {},
			async confirmPay() {
				// console.log(111);
				// console.log(uni.getStorageSync('carts').totalPrice);
				let options = {
					url: '/api/alipay',
					method: 'POST',
					data: {
						outTradeNo: this.outTradeNo,
						totalAmount: this.totalAmount,
						type: 1,
					}
				}
				let result = await this.$http(options)
				if (result.data.list == 200) {
					// 提交支付返回一个form表单 让表单自动提交
					let divform = document.getElementById('divform');
					divform.innerHTML = result.data.list // 解析form表单
					document.forms[0].submit() // 提交返回的表单
				}
			}
		}
	}
</script>

<style>
	/* 引入样式 */
	@import '@/static/css/pay.css';
</style>